<template>
  <view class="userItem">
    <view class="userImg">
      <image :src="imgIcon" mode="scaleToFill"/>
    </view>
    <view class="userContent">
      <view class="baseData">
        <view class="userName u-line-1">{{ title }}</view>
        <view class="updateTime u-line-1">{{ desc }}</view>
      </view>
      <view class="otherData">
        <!--        刚刚-->
        {{ createTime }}
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, toRef, computed, getCurrentInstance} from "vue";
import userManagement from "@/api/user.js";
import {formatTime} from "@/utils/formatTime.js";
import ArticleManagement from '@/api/articleManagement'
import SwitchWechatManagement from '@/api/switchWechatManagement'
import {useStore} from 'vuex'
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const store = useStore();

const item = toRef(props, "item");

const messageType = {
  SYSTEM: {
    icon: "/static/images/message/system.png",
    title: "系统消息",
  },
  REPLY: {
    icon: "/static/images/message/reply.png",
    title: "回复",
  },
  FOLLOW: {
    icon: "/static/images/message/fans.png",
    title: "粉丝",
  },
  WECHAT: {
    icon: "/static/images/message/fans.png",
    title: "交换微信",
  },
};
console.log("item", messageType[item.value.messageType]);

const imgIcon = computed(() => {
  if (item.value.messageType=== "WECHAT") {
    const { appContext } = getCurrentInstance();
    return `${appContext.config.globalProperties.env.VITE_OSS_BUCKET}${requestUserInfo.value.profileImageUrl}`
  }
  return messageType[item.value.messageType]?.icon || "";
});
const title = computed(() => {
  if (item.value.messageType === "WECHAT") {
    return item.value.commentingUser?.userName
  }
  return messageType[item.value.messageType]?.title || "";
});
const desc = computed(() => {
  const content = ''
  switch (item.value.messageType) {
    case "SYSTEM":
      if (articleInfo.value.title) {
        return articleInfo.value.title
      }
      break
    case "REPLY":
      return requestUserInfo.value?.userName + '回复了您的帖子';
      break
    case "FOLLOW":
      const userName = requestUserInfo.value?.userName;
      if (userName) {
        return userName + '关注了您';
      }
      break
    case "WECHAT":
      if (wxChatInfo.value?.approvingStatus === "APPROVE") {
        return '请求与您交换微信'
      }
      if(wxChatInfo.value?.approvingStatus === "APPROVED"){
        return '您已同意交换微信'
      }
      break
    default:
      return "";
  }
});

const createTime = computed(() => {
  return item.value.createTimestamp ? formatTime(+new Date(item.value.createTimestamp)) : '时间格式出错,请输入时间'
});

const {requestingUserId} = item.value
const requestUserInfo = ref({
  userName: "",
  profileImageUrl: "",
})
console.log("requestingUserId", requestingUserId);
if (requestingUserId) {
  userManagement.getUserIdByUserId(requestingUserId).then((res) => {
    console.log("requestingUserId getUserInfo", res);
    requestUserInfo.value = res.data;
  });
}
const articleId = item.value.articleId
const articleInfo = ref({
  title: ""
})
if (item.value.messageType === "SYSTEM") {
  ArticleManagement.getArticleDetail(articleId).then((res) => {
    console.log("articleInfo", res);
    articleInfo.value = res.data;
  }).catch((err) => {
    console.log("articleInfo err", err);
  });
}
const wxChatInfo = ref({})
if (item.value.messageType === "WECHAT") {
  SwitchWechatManagement.getAllSwitchWechatId()
    .then((res) => {
      // debugger
      wxChatInfo.value = res.data.find((item) => item.receiverUserId === store.state.user.userInfo.userId);
      console.log("getSwitchWechatRequestList",wxChatInfo.value);
      item.value.wxChatInfo = wxChatInfo.value
    })
    .catch((err) => {
      console.log("getSwitchWechatRequestList err", err);
    });
}
</script>

<style lang="scss">
.userItem {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin: 10px 0;
}

.userImg {
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16rpx;
}

.userContent {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #dcdcdc;
}

.baseData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-right: 40rpx;

  .userName {
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    margin-bottom: 3px;
  }

  .updateTime {
    color: rgba(153, 153, 153, 1);
    font-size: 18rpx;
  }
}

.otherData {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 24rpx;
}
</style>
